<template>
  <div class="min-project">
    <el-form>
      <el-form-item>
        <el-button size="small"
          type="primary"
          class="fr"
          :disabled="banners.length>=4"
          v-has="'bannerappletadd'"
          @click="_add()">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-table class="easy-table"
          border
          :data="banners"
          style="width:50%">
          <el-table-column label="编号"
            width="50">
            <template slot-scope="scope">
              <span>{{scope.$index+1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="轮播图片">
            <template slot-scope="scope">
              <img :src="scope.row.img"
                width="100"
                style="vertical-align:top;margin:5px 0"
                alt="">
            </template>
          </el-table-column>
          <el-table-column label="图片跳转页面">
            <template slot-scope="scope">
              <div v-if="scope.row.skipType==1">
                {{scope.row.name?scope.row.name:"-"}}
              </div>
              <div v-else
                class="activity">
                <img :src="scope.row.activityImg"
                  alt=""
                  width="80">
                <p style="padding-left:10px">{{scope.row.name}}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button type="text"
                @click="_delete(scope.row.id)"
                v-has="'bannerappletdelete'">删除</el-button>
              <el-button type="text"
                @click="_edit(scope.row)"
                v-has="'bannerappletadd'">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <!-- 编辑、新增 -->
    <el-dialog :title="title"
      :visible.sync="dialogVisible"
      width="650px">
      <el-form label-width="120px"
        :model="form"
        ref="form"
        :rules="rules">
        <el-form-item label="轮播图片"
          prop="img">
          <UploadPic v-model="form.img" />
        </el-form-item>
        <el-form-item label="设置当前图片链接">
          <el-radio v-model="form.skipType"
            :label="1">跳转页面</el-radio>
          <el-radio v-model="form.skipType"
            :label="2">跳转团购券活动</el-radio>
        </el-form-item>
        <el-form-item v-if="form.skipType==1"
          prop="skipId">
          <el-select v-model="form.skipId">
           
            <el-option v-for="item in bannerPull"
              :key="item.id"
              :label="item.name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.skipType==2"
          prop="activityId">
          <el-button type="primary"
            size="small"
            @click="addActivity">选择团购券活动</el-button>
          <div v-if="checkedActivty"
            class="activity-info">
            <img :src="checkedActivty.poster"
              alt=""
              height="60">
            <p>{{checkedActivty.name}}</p>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="sure('form')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 选择全购券活动 -->
    <el-dialog title="选择团购券活动"
      :visible.sync="dialogVisible_1"
      v-if="dialogVisible_1"
      width="1000px">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="search_"
            placeholder="请输入活动标题关键字"
            clearable></el-input>
        </el-form-item>
      </el-form>
      <div style="max-height:500px;overflow-y:auto">
        <table class="custom-1"
          border
          style="width:98%">
          <tr class="style">
            <th style="width:10px"></th>
            <th style="width:200px">
              活动标题
            </th>
            <th>券名称</th>
            <th>销售日期</th>
            <th>状态</th>
          </tr>
          <tr v-for="(item,index) in activityList"
            @click="_checkd(item.id)"
            v-show="search_ == '' || _filter(item.name)"
            :key="index">
            <td style="width:20px">
              &nbsp;&nbsp;&nbsp;
              <el-radio v-model="checkedActivtyId"
                :label="item.id">&nbsp;</el-radio>
            </td>
            <td>
              <div style="width:200px;line-height:16px">
                {{item.name}}
              </div>
            </td>
            <td>
              <div style="width:150px">
                {{item.couponName}}
              </div>
            </td>
            <td>
              <div style="width:150px">
                {{item.activityTime}}
              </div>
            </td>
            <td>{{item.stateName}}</td>
          </tr>
        </table>
      </div>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible_1 = false">取 消</el-button>
        <el-button type="primary"
          @click="addActivitySure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UploadPic from "@/components/common/uploadPic";

import {
  getBannerList,
  deleteBanner,
  bannerPullList,
  updateBanner,
  activityPull
} from "@/public/js/banner";
export default {
  components: {
    UploadPic
  },
  props: {},
  data() {
    return {
      checkActive: "",
      banners: [],
      title: "新增",
      dialogVisible: false,
      dialogVisible_1: false,
      form: {
        id: "",
        type: 1,
        img: "",
        skipType: 1,
        skipId: ""
      },
      search_: "",
      rules: {
        img: [
          { required: true, message: "请选择轮播图片", trigger: "change blur" }
        ],
       
        activityId: [
          {
            required: true,
            message: "请选择跳转的团购券活动",
            trigger: "change"
          }
        ]
      },
      bannerPull: [],
      activityList: [],
      checkedActivtyId: "",
      checkedActivty: null
    };
  },
  watch: {},
  computed: {},
  methods: {
    _add() {
      this.title = "新增";
      this.form = {
        id: "",
        type: 1,
        img: "",
        skipType: 1,
        skipId: "",
        activityId: ""
      };
      this.dialogVisible = true;
    },
    _edit(row) {
      this.title = "编辑";
      let { id, img, skipType, skipId, activityImg, name, activityId } = row;
      this.form = {
        id: id,
        type: 1,
        img,
        skipType,
        skipId,
        activityId
      };
      if (skipType == 1) {
        this.checkedActivty = null;
      } else {
        this.checkedActivty = {
          name,
          poster: activityImg,
          id: activityId
        };
      }
      this.dialogVisible = true;
    },
    _checkd(id) {
      this.checkedActivtyId = id;
    },
    _getBannerList() {
      getBannerList({
        type: 1
      }).then(res => {
        this.banners = res.data.banners;
      });
    },
    _activityPull() {
      activityPull().then(res => {
        this.activityList = res.data.activityPull;
        this.checkedActivtyId = this.activityList[0].id;
      });
    },
    _bannerPullList() {
      bannerPullList({
        type: 1
      }).then(res => {
        this.bannerPull = res.data.banners;
      });
    },
    _filter(searchKey) {
      return searchKey.indexOf(this.search_) > -1;
    },
    __init() {
      this._getBannerList();
      this._bannerPullList();
      this._activityPull();
    },
    //删除
    _delete(id) {
      this.$confirm("是否继续该删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteBanner({ id: id }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this._getBannerList();
          }
        });
      });
    },
    //选择团购券活动
    addActivity() {
      this.dialogVisible_1 = true;
      if (this.checkedActivty) {
        this.checkedActivtyId = this.checkedActivty.id;
      } else {
        this.checkedActivtyId = this.activityList[0].id;
      }
    },
    addActivitySure() {
      this.activityList.forEach(item => {
        if (item.id == this.checkedActivtyId) {
          this.checkedActivty = item;
          console.log(this.checkedActivty);
          this.form.activityId = item.id;
        }
      });
      this.dialogVisible_1 = false;
    },
    sure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          updateBanner(this.form).then(res => {
            if (!res.data.errCode) {
              this.$message.success("操作成功");
              this.dialogVisible = false;
              this._getBannerList();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  created() {
    this.__init();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.min-project {
  .activity {
    display: flex;
    align-items: center;
    padding: 5px 0;
  }
  .el-dialog__body {
    background: #ddd;
  }
  .activity-info {
    display: flex;
    align-items: center;
    background: #f2f2f2;
    padding: 10px;
    & > p {
      line-height: 16px;
      padding-left: 30px;
    }
  }
}
</style>